<template>
  <div class="app-container">
    <!-- <div style="font-size: 20px; margin-bottom: 50px; text-align: center">
      <span>CMSAutoCreate终端</span>
      <el-divider></el-divider>
      <span>{{ tipMessage }}</span>
    </div> -->
    <el-row class="header-nav">
      <el-col class="header-nav-left"
              :span="12">
        <img src="static/img/newLogo.png" />
        <!-- <div class="newLogo"></div> -->
      </el-col>
      <el-col class="header-nav-right"
              :span="12">
        <span>{{title}}</span>
      </el-col>
    </el-row>

    <el-row class="main-section">
      <!-- 身份证信息 -->
      <el-col class="main-section-left-box"
              :span="12"
              :gutter="30">
        <div class="left-box-mession">
          预申报后自动刷卡取飞(交柜请提前验箱)
        </div>
        <div class="left-box-center">
          <img src="static/img/swipe.png" />
        </div>
        <div class="left-box-center2">
          <img v-if="showMessage.type === 'error' || showMessage.type === 'warning'"
               src="static/img/info2.png" />
          <img v-else-if="showMessage.type === 'green'"
               src="static/img/info3.png" />
          <img v-else
               src="static/img/info1.png" />
          <div class="left-box-center2-mession">
            <span v-bind:class="'color-' + showMessage.type">
              {{showMessage.msg}}
            </span>
          </div>
        </div>
      </el-col>
      <el-col class="main-section-right-box"
              :span="12">

        <!-- PCC卡信息 -->
        <div class="box-card right-box">
          <div slot="header"
               class="clearfix">
            <p>PCC卡信息</p>
          </div>
          <el-form ref="form"
                   class="elForm"
                   :model="form"
                   label-width="120px">
            <el-form-item label="PCC卡号">
              <el-input v-model="form.permitNo"
                        disabled></el-input>
            </el-form-item>

            <el-form-item label="车牌号">
              <el-input v-model="form.tractorNo"
                        disabled></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="box-card right-box">
          <div slot="header"
               class="clearfix">
            <p>身份证信息</p>
          </div>
          <el-form ref="form"
                   class="elForm"
                   :model="form"
                   label-width="120px">
            <el-form-item label="姓名">
              <el-input v-model="form.saltName"
                        disabled></el-input>
            </el-form-item>

            <el-form-item label="身份证号码">
              <el-input v-model="form.saltIdNo"
                        disabled></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>

      <el-col class="main-section-bottom-box"
              :span="24">
        <div class="bottom-box-title">
          <svg-icon iconClass="tips"
                    style="margin:0 5%" />
          注意事项
        </div>
        <div class="bottom-box-tips">
          <!-- {{showMessage.tips}} -->
          请不要在飞仔未打印完毕时拉扯飞仔纸,以免导致卡纸
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import {
  showErrorMsg,
  log
} from '@/utils/message'
export default {
  props: {
    title: {
      type: String,
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      showMessage: {
        msg: '请刷卡......',
        success: false,
        type: 'success',
        mession: '您的交柜未进行PAS申报(验箱的箱号未进行PAS申报)，请核查PAS申报资料',
        tips: '请不要在飞仔未打印完毕时拉扯飞仔纸,以免导致卡纸'
      },
      form: {
        name: '',
        idNo: '',
        saltIdNo: '',
        tractorNo: '',
        saltName: '',
        pccId: '',
        permitNo: '',
      }
      // form: {
      //   name: '11111',
      //   idNo: '1111',
      //   saltIdNo: '111',
      //   tractorNo: '111',
      //   saltName: '111',
      //   pccId: '111',
      //   permitNo: '111',
      // }
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    showMsg (dt) {
      this.showMessage.msg = dt.msg
      this.showMessage.type = dt.type
    },
    // 手动触发提交的方法
    submit () {
      let message = {
        dt: this.form,
        ic: this.$props.ic,
        en: false
      }
      log('执行代码 this.$emit(customSentMqttMsg, this.$props.url, message)', this.$props.url, message)
      this.$emit('customSentMqttMsg', this.$props.url, message)
    },
    setForm (form) {
      this.form = form
    },
    handleMsg (retObj) {

    }
  },
}
</script>

<style scoped>
.line {
  text-align: center;
}

.app-container {
  padding: 0px;
}
.header-nav {
  width: 100%;
  height: 45px;
  padding: 0 15px;
  background: linear-gradient(180deg, #f7fbff 0%, #ebf0ff 100%);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -1px 2px 0px #b0b9ce;
}
.header-nav > .header-nav-left {
  cursor: pointer;
}
.header-nav > .header-nav-left > img {
  height: 35px;
  margin-top: 5px;
}
.header-nav > .header-nav-right {
  height: 100%;
  padding-top: 7.5px;
  /* display:flex; */
  text-align: right;
  align-items: center;
}
.header-nav > .header-nav-right > span {
  font-size: 17px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #213767;
  line-height: 26px;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
}

.main-section {
  width: 100%;
  background: url("/static/img/bg.png");
  height: calc(100vh - 45px);
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 25px;
}

.main-section-right-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 45%;
  height: 70%;
  float: right;
  padding: 5%;
  flex-direction: column;
  display: flex;
  padding: 2%;
  justify-content: space-between;
}

.right-box {
  height: 48%;
  width: 100%;
}

.right-box >>> .el-form-item__label {
  font-size: 18px;
  color: #213767;
  font-weight: bold;
}
.right-box .elForm {
  background: #fff;
  width: 100%;
  height: 80%;
  border-radius: 5px;
  flex-direction: column;
  display: flex;
  padding-top: 25px;
  padding-right: 25px;
  overflow: hidden;
}
.right-box p {
  font-size: 20px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  font-size: 16px;
  color: #e5e2e2;
  line-height: 20px;
  margin: 2%;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.main-section-left-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 52%;
  height: 70%;
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.left-box-mession {
  font-size: 12px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #ffffff;
  width: 100%;
  text-align: center;
  height: 18px;
}
.left-box-center {
  width: 90%;
  height: 40%;
  position: relative;
  background: url("/static/img/bg2.png");
  border-radius: 15px;
  background-size: 100% 100%;
}

.smile {
  width: 180px;
  height: 80%;
  margin: 10px;
  background: url("/static/img/smile.png");
  background-size: 130px 125px;
}

.swipe {
  /* width: 180px; */
  height: 80%;
  margin: 10px;
  margin-top: 60px;
  background: url("/static/img/swipe.png") no-repeat center;
  background-size: 240px 140px;
}
.left-box-center2 {
  width: 90%;
  height: 40%;
  position: relative;
  background: url("/static/img/bg3.png");
  border-radius: 15px;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
}
.left-box-center2 > img {
  height: 50%;
  margin-right: 5%;
}
.left-box-center2-mession {
  height: 70%;
  width: 100%;
  font-size: 21px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #196cc8;
  display: flex;
  align-items: center;
}
.left-box-center > img {
  position: absolute;
  width: 25%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.main-section-bottom-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.bottom-box-title {
  background: #fff;
  width: 15%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #3d89e7;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.bottom-box-tips {
  height: 100%;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #ffffff;
}

.main-section-bottom-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  margin-top: 3%;
  height: 100px;
  font-size: 15px;
}

.bottom-box-title {
  background: #fff;
  width: 15%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #3d89e7;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.color-green {
  color: green;
}
.color-blue {
  color: blue;
}
.bottom-box-tips {
  height: 100%;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #ffffff;
}
</style>
